<template>
  <div id="originPrice">
    <br /><br /><br />
    <h2>{{ cate + msg }}</h2>
    <br />
    <div>
      <div id="chinaMap" :style="{ width: '1200px', height: '500px' }"></div>
      <div
        id="originPriceChart"
        class="chart"
        :style="{ width: '1200px', height: '500px' }"
      ></div>
      <h2>详细数据</h2>
      <div class="table-responsive">
        <table class="table table-striped table-sm">
          <thead>
            <tr>
              <th scope="col">#</th>
              <th scope="col">marketDate</th>
              <th scope="col">cateName</th>
              <th scope="col">origin</th>
              <th scope="col">originAvgPrice</th>
              <th scope="col">originPriceChange</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(data, index) in price" :key="index">
              <td>{{ index + 1 }}</td>
              <td>{{ date[index] }}</td>
              <td>{{ cate }}</td>
              <td>{{ origin[index] }}</td>
              <td>{{ data }}</td>
              <td>{{ priceChanges[index] }}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>


<script>
export default {
  name: "productsDataDisplay",
  data() {
    return {
      msg: "的今日各省均价",
      chart: "",
      mapChart: "",
      cate: "",
      price: [],
      origin: [],
      date: [],
      priceChanges: [],
      option: {
        legend: {},
        tooltip: {},
        xAxis: [
          {
            type: "category",
            gridIndex: 0,
            data: [],
          },
        ],
        yAxis: [{ gridIndex: 0 }],
        // grid: [{ bottom: "5%" }, { top: "35%" }],
        grid: {
          x: 20,
          y: 30,
          x2: 20,
          y2: 35,
        },
        series: [
          {
            name: "",
            type: "bar",
            data: [],
            lineStyle: {
              normal: {
                color: "blue",
                width: 3,
              },
            },
          },
        ],
      },
      mapOption: {
        visualMap: {
          left: "left",
          min: 0,
          max: 5,
          inRange: {
            color: [
              "#313695",
              "#4575b4",
              "#74add1",
              "#abd9e9",
              "#e0f3f8",
              "#ffffbf",
              "#fee090",
              "#fdae61",
              "#f46d43",
              "#d73027",
              "#a50026",
            ],
          },
          text: ["High", "Low"], // 文本，默认为数值文本
          calculable: true,
        },
        tooltip: {
          trigger: "item",
          showDelay: 0,
          transitionDuration: 0.2,
        },
        series: [
          {
            name: "价格",
            type: "map",
            map: "china",
            emphasis: {
              label: {
                show: true,
              },
            },
            // 文本位置修正
            textFixed: {
              Alaska: [20, -20],
            },
            data: [],
          },
        ],
      },
    };
  },
  methods: {
    getMax(params) {
      var max = params[0];
      for (var i = 0; i < params.length; i++) {
        if (params[i] > max) {
          max = params[i];
        }
      }
      return max;
    },
    getMin(params) {
      var min = params[0];
      for (var i = 0; i < params.length; i++) {
        if (params[i] < min) {
          min = params[i];
        }
      }
      return min;
    },
    getInfo(cateName) {
      this.axios
        .get(
          "http://localhost:8081/api-service/getAllOrigin?cateName=" + cateName
        )
        .then((body) => {
          var result = body.data;
          console.log(result.data.result.length);
          for (var i = 0; i < result.data.result.length; i++) {
            this.price.push(result.data.result[i].originAvgPrice);
            this.date.push(result.data.result[i].marketDate);
            this.priceChanges.push(result.data.result[i].originPriceChange);
            this.origin.push(result.data.result[i].origin);
            this.mapOption.series[0].data.push({
              name: result.data.result[i].origin,
              value: result.data.result[i].originAvgPrice,
            });
          }
          this.mapOption.visualMap.max=this.getMax(this.price);
          this.mapOption.visualMap.min=parseFloat(this.getMin(this.price));
          this.option.xAxis[0].data = this.origin;
          this.option.series[0].data = this.price;
          this.option.series[0].name = cateName + "各省均价";
          this.chart.setOption(this.option);
          this.mapChart.setOption(this.mapOption);
        });
    },
  },
  mounted() {
    this.cate = this.$route.query.cate;
    this.chart = this.echarts.init(document.getElementById("originPriceChart"));
    this.mapChart = this.echarts.init(document.getElementById("chinaMap"));
    this.getInfo(this.cate);
    // this.chart.setOption(this.option);
    // this.mapChart.setOption(this.mapOption);
  },
};
</script>



<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
@import "@/../../static/css/dashboard.css";
h1,
h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
.chart {
  margin: auto;
  position: relative;
}
.bd-placeholder-img {
  font-size: 1.125rem;
  text-anchor: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

@media (min-width: 768px) {
  .bd-placeholder-img-lg {
    font-size: 3.5rem;
  }
}
</style>